<template>
       <el-table :data="ticket" stripe border style="width: 100%; font-size: 14px; color: #333">
    <el-table-column label="序号" type='index' width="55" align="center"/>
    <el-table-column prop="number" label="车次"/>
    <el-table-column prop="nowAddress" label="出发站"  />
    <el-table-column prop="nextAddress" label="终点站" />
    <el-table-column prop="beginTime" label="发车时间" />
    <el-table-column prop="endTime" label="到站时间" />
    <el-table-column prop="carriageNumber" label="车厢号" />
    <el-table-column prop="seatNumber" label="座位号" />
    <el-table-column prop="price" label="票价" />
    <el-table-column prop="op" label="操作" >
    <template #default="scope">
      <el-button type="danger" @click="handleDelete(scope.row)">退票</el-button>
    </template>
  </el-table-column>
  </el-table>
</template>

<script setup>
import { ref ,onMounted} from 'vue'
import { searchMyTicket,delMyTicket } from '../api/myTicket'
const ticket = ref([])

onMounted(() => {
    searchMyTicket(localStorage.getItem("userId")).then(res => {
  ticket.value = res.data
}
).catch(err => {
  console.log(err)
  alert("查询失败！")
})
});

function handleDelete(row) {
    delMyTicket(row.id).then(res => {
      alert("退票成功！")
      searchMyTicket(localStorage.getItem("userId")).then(res => {
        ticket.value = res.data
      }).catch(err => {
        console.log(err)
        alert("查询失败！")
      })
}).catch(err => {
  console.log(err)
  alert("查询失败！")
})
}
</script>